<template>
	<view class="feedback-container">
		<!-- 头部标题 -->
		<view class="header">
			<view class="header-top">
				<text class="title">餐厅反馈</text>
				<text class="history-link" @click="navigateToHistory">查看历史反馈</text>
			</view>
			<text class="subtitle">请选择反馈目标并填写内容</text>
		</view>

		<!-- 反馈表单 -->
		<view class="form-container">
			<!-- 校区选择 -->
			<view class="form-item">
				<text class="label">选择校区</text>
				<picker mode="selector" :range="campuses" :value="selectedCampusIndex" @change="handleCampusChange">
					<view class="picker">
						{{ campuses[selectedCampusIndex] || '请选择校区' }}
						<uni-icons type="arrowdown" size="16" color="#999" />
					</view>
				</picker>
			</view>

			<!-- 食堂选择 -->
			<view class="form-item">
				<text class="label">选择食堂</text>
				<picker mode="selector" :range="canteens" :disabled="!selectedCampus" @change="handleCanteenChange">
					<view class="picker" :class="{ disabled: !selectedCampus }">
						{{ selectedCampus ? (selectedCanteen || '请选择食堂') : '请先选择校区' }}
						<uni-icons type="arrowdown" size="16" color="#999" />
					</view>
				</picker>
			</view>

			<!-- 餐厅选择 -->
			<view class="form-item">
				<text class="label">选择餐厅</text>
				<picker mode="selector" :range="restaurants" :disabled="!selectedCanteen"
					@change="handleRestaurantChange">
					<view class="picker" :class="{ disabled: !selectedCanteen }">
						{{ selectedCanteen ? (selectedRestaurant || '请选择餐厅') : '请先选择食堂' }}
						<uni-icons type="arrowdown" size="16" color="#999" />
					</view>
				</picker>
			</view>

			<!-- 反馈内容 -->
			<view class="form-item">
				<text class="label">反馈内容</text>
				<textarea v-model="feedbackContent" placeholder="请输入具体反馈内容（最多500字）" class="textarea" maxlength="500" />
				<text class="counter">{{ feedbackContent.length }}/500</text>
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" :disabled="!formValid" @click="submitfeedback">
				{{ isLoading ? '提交中...' : '提交反馈' }}
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch,
		onMounted
	} from 'vue'
	import {
		getCampus,
		getCanteenList,
		getResturantList,
		submitFeedback
	} from '../../request/api.js'
	// import {
	// 	submitFeedback
	// } from '../../api/feedback'

	// 模拟数据（实际应从接口获取）
	const campuses = ref(['紫金港校区', '玉泉校区', '西溪校区', '华家池校区'])
	const campusList = ref([])
	const canteens = ref([])
	const canteenList = ref([])
	const restaurants = ref([])
	const restaurantList = ref([])

	// 选择结果
	const selectedCampus = ref('')
	const selectedCampusIndex = ref(0)
	const selectedCanteen = ref('')
	const selectedRestaurant = ref('')
	const feedbackContent = ref('')

	// 加载状态
	const isLoading = ref(false)

	// 级联数据映射（示例数据）
	const locationData = {
		'紫金港校区': {
			'临湖餐厅': ['1楼餐厅', '2楼风味餐厅'],
			'麦香餐厅': ['西区餐厅', '东区简餐'],
			'银泉餐厅': ['1楼餐厅', '2楼美食广场']
		},
		'玉泉校区': {
			'一食堂': ['大众餐厅', '风味窗口'],
			'二食堂': ['教工餐厅', '学生餐厅']
		}
	}

	// 监听校区选择
	watch(selectedCampus, async (newVal) => {
		if (newVal) {
			const newIndex = campusList.value.findIndex(item => item.campus_name === newVal);
			const temp = await getCanteenList(campusList.value[newIndex].campus_id || '');
			canteenList.value = temp.canteens;
			canteens.value = temp.canteens.map(i => i.canteen_name)
			// canteens.value = Object.keys(locationData[newVal])
			selectedCanteen.value = ''
			selectedRestaurant.value = ''
		}
	})

	// 监听食堂选择
	watch(selectedCanteen, async (newVal) => {
		if (newVal && selectedCampus.value) {
			const newIndex = canteenList.value.findIndex(item => item.canteen_name === newVal);
			const temp = await getResturantList(canteenList.value[newIndex].canteen_id || '');
			restaurantList.value = temp.restaurants;
			restaurants.value = temp.restaurants.map(i => i.restaurant_name)
			selectedRestaurant.value = ''
		}
	})

	// 表单验证
	const formValid = computed(() => {
		return selectedCampus.value &&
			selectedCanteen.value &&
			selectedRestaurant.value &&
			feedbackContent.value.trim().length >= 10
	})

	const navigateToHistory = () => {
		uni.navigateTo({
			url: '/subpackage/history/index'
		})
	}

	// 处理选择器变化
	const handleCampusChange = (e) => {
		selectedCampusIndex.value = e.detail.value
	}

	const handleCanteenChange = (e) => {
		selectedCanteen.value = canteens.value[e.detail.value]
	}

	const handleRestaurantChange = (e) => {
		selectedRestaurant.value = restaurants.value[e.detail.value]
	}

	// 提交反馈
	const submitfeedback = async () => {
		if (!formValid.value || isLoading.value) return
		const campusId = campusList.value[selectedCampusIndex.value].campus_id
		const canteenId = canteenList.value.find(item => item.canteen_name === selectedCanteen.value).canteen_id
		const restaurantId = restaurantList.value.find(item => item.restaurant_name === selectedRestaurant.value)
			.restaurant_id;

		try {
			isLoading.value = true
			await submitFeedback({
				campusId,
				canteenId,
				restaurantId,
				content: feedbackContent.value.trim()
			})

			uni.showToast({
				title: '提交成功',
				icon: 'success'
			})
			// 重置表单
			selectedCampus.value = ''
			feedbackContent.value = ''
		} catch (error) {
			uni.showToast({
				title: '提交失败，请重试',
				icon: 'none'
			})
		} finally {
			isLoading.value = false
		}
	}

	onMounted(async () => {
		const temp = await getCampus();
		campuses.value = temp.campuses.map(item => item.campus_name);
		campusList.value = temp.campuses
		selectedCampus.value = temp.campuses[0].campus_name
		const canteentemp = await getCanteenList(temp.campuses[0].campus_id || '');
		canteenList.value = canteentemp.canteens;
		canteens.value = canteentemp.canteens.map(i => i.canteen_name)

	})
</script>

<style scoped>
	.feedback-container {
		padding: 40rpx;
		background: #f8f9fc;
		min-height: 100vh;
	}

	.header {
		margin-bottom: 60rpx;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.history-link {
		color: #3b82f6;
		font-size: 28rpx;
		text-decoration: underline;
	}

	.title {
		display: block;
		font-size: 44rpx;
		font-weight: 600;
		color: #1a1a1a;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #999;
	}

	.form-container {
		background: white;
		border-radius: 24rpx;
		padding: 40rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
	}

	.form-item {
		margin-bottom: 48rpx;
	}

	.label {
		display: block;
		font-size: 32rpx;
		color: #333;
		margin-bottom: 24rpx;
	}

	.picker {
		padding: 24rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.picker.disabled {
		background: #f8f9fc;
		color: #ccc;
	}

	.textarea {
		width: 100%;
		height: 300rpx;
		padding: 24rpx;
		border: 2rpx solid #eee;
		border-radius: 12rpx;
		font-size: 28rpx;
		line-height: 1.6;
	}

	.counter {
		display: block;
		text-align: right;
		color: #999;
		font-size: 24rpx;
		margin-top: 16rpx;
	}

	.submit-btn {
		background: #3b82f6;
		color: white;
		height: 96rpx;
		border-radius: 12rpx;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit-btn[disabled] {
		background: #c7d2fe;
		color: #fff;
	}
</style>